<template>
  <div class="login">
    <div class="login-box">
      <div class="title flex justify-center mb-20px">
        <div class="left mr-20px">
          <img src="/img/icon.png" alt="">
        </div>
        <div class="right  text-#7F0102 text-40px font-bold">
          {{name}}
        </div>
      </div>
      <div class="form-box shadow-coolgray bg-white px-40px py-20px rounded-sm">
        <div class="title text-center text-30px text-#333 mb-20px" >
          登录
        </div>
        <div class="tab mb-20px">
          <div class="tab-item flex justify-around">
            <div
              class="item text-#999 text-16px font-500 cursor-pointer"
              :class="{ active: currentTab === 'account' }"
              @click="changeTab('account')"
            >
              账号密码登录
            </div>
            <div
              class="item text-#999 text-16px font-500 cursor-pointer"
              :class="{ active: currentTab === 'mobile' }"
              @click="changeTab('mobile')"
            >
              手机号登录
            </div>
          </div>
        </div>
        <div class="form">
          <el-form size="large" v-show="currentTab === 'account'">
            <el-form-item label="">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入账号"
                class="mb-20px"
              >
                <template #prefix>
                  <el-icon color="#75757f"><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model="loginForm.password"
                placeholder="请输入密码"
                class="mb-20px"
                type="password"
              >
                <template #prefix>
                  <el-icon color="#75757f"><Hide /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="">
              <div class="flex w-full justify-between">
                <el-input
                  v-model="loginForm.captcha"
                  style="width: 75%"
                  placeholder="请输入验证码"
                  class="mb-20px"
                >
                  <template #prefix>
                    <img width="15px" height="15px" src="/img/user/valid.png" alt="">
                  </template>
                </el-input>
                <el-button
                  type="primary"
                  @click="getCaptcha"
                  :disabled="captchaEnabled"
                >
                  {{ captchaButtonText }}
                </el-button>
              </div>
            </el-form-item>
          </el-form>
          <el-form size="large" v-show="currentTab === 'mobile'">
            <el-form-item label="">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入手机号"
                class="mb-20px"
              >
                <template #prefix>
                  <el-icon color="#75757f"><Iphone /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="">
              <div class="flex w-full justify-between">
                <el-input
                  v-model="loginForm.captcha"
                  style="width: 75%"
                  placeholder="请输入验证码"
                  class="mb-20px"
                >
                  <template #prefix>
                    <img width="15px" height="15px" src="/img/user/valid.png" alt="">
                  </template>
                </el-input>
                <el-button
                  type="primary"
                  @click="getCaptcha"
                  :disabled="captchaEnabled"
                >
                  {{ captchaButtonText }}
                </el-button>
              </div>
                 
            </el-form-item>
          </el-form>
        </div>
        <div class="btn my-10px">
          <div @click="goHome" class="submit-btn bg-#7F0102 text-white text-16px text-center py-10px rounded-md cursor-pointer">
            登录
          </div>
        </div>
        <div class="other">
          <div class="text-#999 text-16px flex justify-between cursor-pointer">
            <span class="mr-10px">忘记密码</span>
            <span class="text-#7F0102 " @click="goRegister">没有账号，立即注册</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>

import {Hide, Iphone, Phone, User} from "@element-plus/icons-vue";

const currentTab = ref("account");
const {name} = useAppConfig()
function changeTab(tab) {
  console.log({ tab });
  currentTab.value = tab;
}
function getCaptcha() {}
const loginForm = ref({
  username: "",
  password: "",
  captcha: "",
});
const captchaEnabled = ref(false);
const captchaButtonText = ref("获取验证码");

definePageMeta({
  layout: false ,
});
function goHome() {
  const router = useRouter()
  router.replace({path: '/'})
}
function goRegister() {
  navigateTo({
    path: '/register'
  })
}
</script>

<style scoped lang="scss">
.login {
  height: 100%;
  width: 100%;
  background-image: url("/img/user/bg-login.png");
  background-size: 100% 100%;
  object-fit: cover;
  .login-box {
    min-width: 600px;
    position: absolute;
    border-bottom: 1px solid #fff;
    left: 50%;
    top: 15vh;
    //top: 50%;
    //transform: translate(-50%, -50%);
    transform: translateX(-50%);
  }
}
.tab {
  .active {
    color: #7F0102;
  }
}

</style>
